<template>
  <div class="login_container">
    <!-- 背景视频引入 -->
    <video
      muted="muted"
      src="../../assets/video/bg-video.d2d602a9 (1).mp4"
      loop="loop"
      autoplay="autoplay"
      class="video"
    ></video>
    <!-- 背景小图 -->
    <div class="bg2"></div>
    <!-- 表单界面 -->
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 标题抬头 -->
      <h1 class="head">千峰管理系统</h1>
      <!-- 常规登入 -->
      <Common
      
        ref="commonLogin"
        @syncRuleForm="handleRuleForm"
        @submit="submit"
         v-if="loginType === 'common'"
         @changeSmsType="changeSmsType"
      ></Common>

     
      <!-- 二维码区域 -->

      <Erwei :storageUserInfo="storageUserInfo" v-else-if="loginType === 'qrlogin'"></Erwei>

      <!-- 切换短信验证码区域 -->

      <Dxdr :storageUserInfo="storageUserInfo" v-else ></Dxdr>
       <!-- 角标 -->
      <i :class="['jiaobiao', 'iconfont', jiaobiaoType]"
          @click="changeLoginType"></i>

    </el-form>
  </div>
</template>

<script>
// import { component } from 'vue/types/umd';
import Common from "./commonLogin.vue";
import Dxdr from "./smsLogin.vue";
import Erwei from "./qrLogin.vue";
import * as api from "../../api/users";
import storage from "../../utils/storage";
//校验验证码
var validateCaptcha = (rule, value, callback) => {
  var uPatt = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPatt.test(value)) {
    callback();
  } else {
    callback("请您输入5位");
  }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
  //  console.log(rule)
  //  console.log(value)
  // 字母、数字、下划线 4-16位
  //  var uPatten = /^[a-zA-Z0-9_-]{4,16}$/
  var uPatten = /^[a-zA-Z0-9_-]{3,16}$/;
  // callback == 如果校验通过 直接回调 callback
  // 如果校验不通过 直接传参
  if (uPatten.test(value)) {
    callback();
  } else {
    callback("3-16位字母、数字、下划线");
  }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
  // 数字和字母组成 6-10位 /^[A-Za-z0-9]{6}$/

  if (value.length < 3) {
    callback("请输入不少于3位的密码");
  } else {
    callback();
  }
};

export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
      },
      loginType: "common",
      fasongSms: {
        telnum: "",
        textnum: "",
        captcha: "",
      },
      rules: {
        // 表单验证规则
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  computed: {
    jiaobiaoType() {
      if (this.loginType === "qrlogin" || this.loginType === "smslogin") {
        return "icon-diannaojiaobiao";
      }
      if (this.loginType === "common") {
        return "icon-erweimajiaobiao";
      }
    },
  },
  components: {
    Common,
    Dxdr,
    Erwei,
  },
  methods: {
        //更改短信验证页面
    changeSmsType() {
      this.loginType = "smslogin";
    },
    // 更改登入方式
    changeLoginType() {
      if (this.loginType === "common") {
        this.loginType = "qrlogin";
      } else if (this.loginType === "qrlogin") {
        this.loginType = "common";
      } else {
        this.loginType = "common";
      }
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // alert("submit!");
          api.verifyCaptcha(this.ruleForm.captcha).then(async (res) => {
            if (res.data.state) {
              console.log(res)
              let { username, password } = this.ruleForm;
              let res = await api.loginApi(username, password);
              console.log(res);
              //  console.log(res)  // res的打印不能写在if判定外面 否则检测不到正确state数据状态
              if (res.data.state) {
                // 存储信息到本地
                this.storageUserInfo(res.data);
                // 跳转到主页
                // this.$router.push("/")
                console.log(res)
              }
            }
          });
        } else {
          // return false;
          // 当验证码不通过 刷新验证码
          this.$refs["commonLogin"].getCaptcha();
        }
      });
      //  console.log(123)
      //  console.log(this.$refs)
    },

    handleRuleForm(newRuleForm) {
      // console.log(newRuleForm)
      this.ruleForm = newRuleForm;
    },
    //封装   用于存储用户的信息和token
    storageUserInfo({ userInfo, token, permission }) {
      // 将信息存到vuex
      // this.$store.commit('users/SET_USERINFO', userInfo)
      storage.set("userInfo", userInfo);
      storage.set("qf-token", token);
      storage.set("permission", permission);

      let r = storage.get("userInfo");
      console.log(r);
      // storage.set('qf-token', token)
      // storage.set('permission', permission)
    },
  },
};
</script>

<style lang="less" scoped>
//  scoped 防止污染
// 修改element-ui的样式
// 1 打开调试器 找准类名 覆盖样式
// 2 看权重 使用 !import
// 3 使用深度选择器 >>> /deep/ lang语法改为less
// 当!import 权重无法更改是 使用 >>> 更改样式
//   .container{
//     position: relative;
//   }
// 角标
.jiaobiao {
  font-size: 60px;
  color: #fff;
  position: absolute;
  right: -1px;
  top: -1px;
  cursor: pointer;
  opacity: 0.6;
}
.bg2 {
  background-image: url(../../assets/video/background2.png);
  background-repeat: no-repeat;
  position: fixed;
  width: 20%;
  height: 40%;
  background-size: 100% 100%;
  left: 20%;
  top: 40%;
  opacity: 0.5;
}

.demo-ruleForm {
  // 表单
  // border: 4px solid rgb(148, 144, 144);
  // height: 400px;
  position: fixed;
  right: 10%;
  top: 21%;
  // margin: auto;
  border-radius: 5px;
  width: 434px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 100px 0 50px 0;
}

.login_container .video {
  //背景视频
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.head {
  // h1标签
  text-align: center;
  display: block;
  font-weight: bold;
  color: #fff;
  margin-bottom: 40px;
}
</style>